<template>
  <div class="Word">
    <div style="margin: 100px" align="center">
      <h2>演示：批量转PDF</h2>
      <div style="width: 600px; margin: 0 auto; font-size: 14px">
        <p style="text-align: left">
          操作说明：<br />
          1. 勾选下面的文件；<br />
          2. 点击“批量转换PDF文档”按钮；<br />
          3.生成完毕后，即可在“FileMakerConvertPDFs/doc”目录下看到批量生成的PDF文件。<br />
        </p>
      </div>
      <h3>文件列表</h3>
      <table id="table1">
        <tr>
          <th>
            <input name="checkAll" type="checkbox" @click="selectall()" />
          </th>
          <th>序号</th>
          <th>文件名</th>
          <th>操作</th>
        </tr>
        <tr>
          <td><input name="check" type="checkbox" value="1" /></td>
          <td>01</td>
          <td>PageOffice产品简介</td>
          <td>
            <a
              href="javascript:POBrowser.openWindow('Edit?id=1','width=1150px;height=800px;');"
              >编辑</a
            >
          </td>
        </tr>
        <tr>
          <td><input name="check" type="checkbox" value="2" /></td>
          <td>02</td>
          <td>PageOffice产品安装步骤</td>
          <td>
            <a
              href="javascript:POBrowser.openWindow('Edit?id=2','width=1150px;height=800px;');"
              >编辑</a
            >
          </td>
        </tr>
        <tr>
          <td><input name="check" type="checkbox" value="3" /></td>
          <td>03</td>
          <td>PageOffice产品应用领域</td>
          <td>
            <a
              href="javascript:POBrowser.openWindow('Edit?id=3','width=1150px;height=800px;');"
              >编辑</a
            >
          </td>
        </tr>
        <tr>
          <td><input name="check" type="checkbox" value="4" /></td>
          <td>04</td>
          <td>PageOffice产品对环境的要求</td>
          <td>
            <a
              href="javascript:POBrowser.openWindow('Edit?id=4','width=1150px;height=800px;');"
              >编辑</a
            >
          </td>
        </tr>
      </table>

      <input
        type="button"
        id="Button1"
        value="批量转换PDF文档"
        @click="ConvertFiles()"
      />

      <div id="progressDiv">
        单文件进度：
        <div class="progressBarContainer">
          <div id="progressBar1" class="progressBar"></div>
        </div>
        整体进度：
        <div class="progressBarContainer">
          <div id="progressBar2" class="progressBar"></div>
        </div>
        <div id="errorMsg"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Word",
  data() {
    return {
      checkit: true,
    }
  },
  methods: {
    selectall() {
      if (this.checkit) {
        var obj = document.all.check;
        for (var i = 0; i < obj.length; i++) {
          obj[i].checked = true;
          this.checkit = false;
        }
      } else {
        var obj = document.all.check;
        for (var i = 0; i < obj.length; i++) {
          obj[i].checked = false;
          this.checkit = true;
        }
      }
    },
    ConvertFiles() {
      var ids = [];
      var checkboxes = document.getElementsByName("check");

      for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
          ids.push(checkboxes[i].value);
        }
      }

      if (0 == ids.length) {
        alert("请至少选择一个文档");
        return;
      }

      document.getElementById("Button1").disabled = true;
      ConvertFile(ids, 0);
    },
    ConvertFile(idArr, index) {
      //注意：CallFileMaker是pageoffice.js中封装好的方法，专门供调用FileMakerCtrl生成文件使用
      CallFileMaker({
        //url：指向服务器端FileMakerCtrl生成文件的controller地址
        url: "/api/FileMakerConvertPDFs/convert?id=" + idArr[index],
        success: function () {
          console.log("completed successfully.");
          setProgress1(100);

          index++;
          setProgress2(index, idArr.length);

          if (index < idArr.length) {
            ConvertFile(idArr, index);
          }
        },
        progress: function (pos) {
          console.log("running " + pos + "%");
          setProgress1(pos);
        },
        error: function (msg) {
          document.getElementById("errorMsg").innerHTML =
            "发生错误: <br /> " + msg;
          console.log("error occurred: " + msg);
        }
      })
    },
    setProgress1(percent) {
      var progressBar = document.getElementById("progressBar1");
      progressBar.style.width = percent + "%";
      progressBar.innerText = percent + "%";
    },
    setProgress2(index, count) {
      var progressBar = document.getElementById("progressBar2");
      progressBar.style.width = Math.round((index / count) * 100) + "%";
      progressBar.innerText = index + "/" + count;
    }
  },
  mounted: function () {
    //将vue中的方法赋值给window
    //注意：这里必须将setProgress(),setProgress2(),ConvertFile()这些方法挂载到windows对象上，否则CallFileMaker中将没法调用此方法
    window.setProgress1 = this.setProgress1;
    window.setProgress2 = this.setProgress2;
    window.ConvertFile = this.ConvertFile;
  }
}
</script>
<style scoped>
h3 {
  display: block;
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
h2 {
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
table {
  border: solid 1px #ccc;
  width: 600px;
  margin: 20px;
}
th {
  border-bottom: solid 1px #ccc;
  text-align: left;
  padding: 5px;
}
td {
  padding: 5px;
}
.progressBarContainer {
  width: 100%;
  background-color: #eee;
  border-radius: 5px;
  padding: 3px;
  box-shadow: 2px 2px 3px 3px #ccc inset;
}

.progressBar {
  height: 20px;
  width: 0%;
  background-color: #1a73e8;
  border-radius: 5px;
  text-align: center;
  line-height: 20px; /* 使文字垂直居中 */
  color: white;
}

#progressDiv {
  width: 400px;
  margin: 10px auto;
  text-align: left;
  font-size: 14px;
  border: solid 1px #1a73e8;
  padding: 10px 20px;
  color: #1a73e8;
}
#errorMsg {
  color: red;
}
</style>